<template>
	<hr />
	<div class="globel-style">Home Page</div>
	<div class="global-styles1">Home 中使用全局样式</div>
	<div class="global-style2">Home 使用sass编写的全局样式</div>

	<div class="local-style">Home 局部样式</div>
</template>

<script setup></script>

<style scoped lang="scss">
	// 第一种手动导入全局样式(官网已经不推荐了)
	// @import '@/assets/styles/variables.scss';

	// 第二种手动导入全局样式方式(as 变量名: 表示给这个文件其一个命名空间)
	// @use 和 @import 的区别
	// 		1. 使用@import如果文件与文件中有内容是相同的, 后面的文件会将前面中的内容覆盖
	// 		2. @use 的性能比 @import 性能高

	// 		@use 文件 as *
	// 			省略命名, 可以直接使用@use引入的变量, 不需要使用命名空间.变量方式引入变量
	@use '~/assets/styles/variables.scss' as vb;
	.local-style {
		color: vb.$color;
		font-size: vb.$fs20;
		@include vb.border();
	}
</style>
